<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form
      @submit.native.prevent
      :model="queryParams"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="分类名称">
        <el-input
          @keyup.enter="handleQuery"
          v-model="queryParams.keyword"
          style="width: 200px"
          placeholder="请输入分类名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb15">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          class="el-icon-plus"
          @click="openModel(undefined)"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          :disabled="categoryIdList.length === 0"
          icon="Delete"
          @click="handleDelete(undefined)"
          >批量删除</el-button
        >
      </el-col>
      <RightToolBar
       @changeShow="changeShowSearch" 
        :showSearch="showSearch"
        @queryTable="getList"
      ></RightToolBar>
    </el-row>
    <!-- 表格展示 -->
    <el-table
      border
      :data="categoryList"
      @selection-change="handleSelectionChange"
      v-loading="loading"
    >
      <!-- 表格列 -->
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <!-- 分类名 -->
      <el-table-column
        prop="categoryName"
        width="300"
        label="分类名"
        align="center"
      ></el-table-column>
      <!-- 文章量 -->
      <el-table-column
        prop="articleCount"
        label="文章量"
        align="center"
      ></el-table-column>
      <!-- 创建时间 -->
      <el-table-column
        prop="createTime"
        width="300"
        label="创建时间"
        align="center"
      >
        <template #default="scope">
          <div class="create-time">
            <el-icon>
              <clock />
            </el-icon>
            <span style="margin-left: 10px">{{
              formattedDate(scope.row.createTime)
            }}</span>
          </div>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column width="300" label="操作" align="center">
        <template #default="scope">
          <el-button
            type="warning"
            class="el-icon-edit"
            size="mini"
            plain
            @click="openModel(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            class="el-icon-delete"
            size="mini"
            plain
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
     <!-- 分页 -->
      <Pagination
      :total="count"   
      :page.sync="queryParams.current" 
      :limit.sync="queryParams.size"     
      @pagination="getList" 
    />
    <!-- 添加或修改对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="addOrUpdate"
      width="500px"
      append-to-body
    >
      <el-form
        ref="categoryFormRef"
        label-width="100px"
        :model="categoryForm"
        :rules="rules"
        @submit.native.prevent
      >
        <el-form-item label="分类名称" prop="categoryName">
          <el-input
            placeholder="请输入分类名称"
            v-model="categoryForm.categoryName"
            style="width: 250px"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="addOrUpdate = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getCategoryListWithArticle, addCategory, updateCategory,deleteCategory  } from "@/api/category";
import { formatDate } from "@/utils/date";
export default {
  data() {
    return {
      count: 0,
      showSearch: true,
      loading: false,
      title: "",
      addOrUpdate: false,
      queryParams: {
        current: 1,
        size: 10,
      },
      categoryForm: {
        id: undefined,
        categoryName: "",
      },
      categoryIdList: [],
      categoryList: [],
      rules: {
        categoryName: [
          { required: true, message: "文章分类不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //搜索
    handleQuery() {
      this.getList();
    },
    //获取信息
    getList() {
      this.loading = true;
      getCategoryListWithArticle(this.queryParams).then((data) => {
        if (data.code == 200) {
          this.categoryList = data.data.recordList;
          this.count = data.data.count;
          this.loading = false;
        }
      });
    },
    //多选处理
    handleSelectionChange(selectedItems) {
     this.categoryIdList = selectedItems.map((item) => item.id);
    },
    //提交表单
    submitForm() {
      this.$refs.categoryFormRef.validate((valid) => {
        if (valid) {
          if (this.categoryForm.id != undefined) {
            updateCategory(this.categoryForm).then((data) => {
              if (data.code == 200) {
                this.$message({
                  type: "success",
                  message: data.msg,
                });
                this.addOrUpdate = false;
                this.getList();
              } else {
                this.$message({
                  type: "danger",
                  message: data.msg,
                });
              }
            });
          } else {
            addCategory(this.categoryForm).then((data) => {
              if (data.code == 200) {
                this.$message({
                  type: "success",
                  message: data.msg,
                });
                this.addOrUpdate = false;
                this.getList();
              } else {
                this.$message({
                  type: "danger",
                  message: data.msg,
                });
              }
            });
          }
        }
      });
    },
    //打开对话框（新增、修改）
    openModel(data) {
      this.addOrUpdate = true;
      if (data == undefined) {
        this.title = "新增分类";
        this.categoryForm = {
          id: undefined,
          categoryName: "",
        };
      } else {
        this.title = "修改分类";
        this.categoryForm = {
          id: data.id,
          categoryName: data.categoryName,
        };
      }
    },
    //日期格式化
    formattedDate(date) {
      return formatDate(date);
    },
    handleDelete(id) {
      if (id != undefined) {
        this.categoryIdList.push(id);
      }
      this.$confirm("确认删除选中的数据吗？", "提示", {
        type: "warning",
          confirmButtonText: '确定',
          cancelButtonText: '取消',
      })
        .then(() => {
        deleteCategory(this.categoryIdList).then((data) => {
        if (data.code == 200) {
          this.$message({
            type: "success",
            message: data.msg,
          });
          this.getList();
        }
      });
        })
      .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //改变搜索显示状态
    changeShowSearch(data){
      this.showSearch = data;
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style>
</style>